<template>
  <div>
    <!-- index 主页主内容 -->
    <div class="body">
            <div id="demo" class="carousel" data-ride="carousel">
                <!-- 1.轮播图片 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="w-100" src="http://127.0.0.1:3000/20160101nyygtp.jpg" />
                    </div>
                    <div class="carousel-item">
                        <img class="w-100" src="http://127.0.0.1:3000/20150828nfxgfi.png" />
                    </div>
                    <div class="carousel-item">
                        <img class="w-100" src="http://127.0.0.1:3000/20160115vfjofw.jpg" />
                    </div>
                    <div class="carousel-item">
                        <img class="w-100" src="http://127.0.0.1:3000/20151113bydlcs.jpg" />
                    </div>
                    <div class="carousel-item">
                        <img class="w-100" src="http://127.0.0.1:3000/20160102arbqrg.jpg" />
                    </div>
                    <div class="carousel-item">
                        <img class="w-100" src="http://127.0.0.1:3000/20150828skspru.png" />
                    </div>
                </div>
                <!-- 2.左右按钮 -->
                <a data-slide="prev" href="#demo" class="carousel-control-prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a data-slide="next" href="#demo" class="carousel-control-next">
                    <span class="carousel-control-next-icon"></span>
                </a>
                <!-- 3.轮播指示器 -->
                <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                    <li data-target="#demo" data-slide-to="3"></li>
                    <li data-target="#demo" data-slide-to="4"></li>
                    <li data-target="#demo" data-slide-to="5"></li>
                </ul>
            </div>
        </div>
        <div class="container">
            <!--index真爱验证页面-->
            <div class="index_verify row text-white m-0 my-5">
                <div class="col-3 py-3 px-5">
                    <h1>真爱验证</h1>
                     <p>您敢购买IDLOVES吗？<br/>请出示您的身份证</p>
                </div>
                <div class="col-9 mt-5 py-0 px-5">
                    <span>国家/区域：</span>
                    <button class="btn btn-white dropdown-toggle" data-toggle="dropdown">中国大陆</button>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:;" value="zgdl">中国大陆</a></li>
                        <li><a href="javascript:;" value="zgxg">中国香港</a></li>
                        <li><a href="javascript:;" value="zgam">中国澳门</a></li>
                        <li><a href="javascript:;" value="zgtw">中国台湾</a></li>
                    </ul>
                    <span>—</span>
                    <input type="text" placeholder="请输入您的姓名" v-model="userName"/>
                    <span>—</span>
                    <input class="mr-4" type="text" placeholder="请输入您的身份证号码" v-model="idNumber"/>
                    <button class="btn text-white btn-dark" @click="lovereg">立即验证</button>
                </div>
            </div>
            <!-- 详细介绍文案 -->
            <div class="intro_duce">
                <p class="m-0">IDLOVES是谁？<a href="javascript:;"></a></p>
                <p class="border_bottom1">
                    <strong class="border_bottom_angle"></strong>
                </p>
                <p class="border_bottom2"></p>
            </div>
            <br/>
            <div class="row m-0">
                <div class="col-6 p-0">
                    <img class="w-100" src="http://127.0.0.1:3000/shouye1_03.jpg" alt=""/>
                </div>
                <div class="col-6 font_style">
                    IDLOVES平等高贵之真爱理念起源于古希腊，是一个为同志而生、专注5%同志人群婚姻平权领域的珠宝品牌，为同志发声,消除偏见歧视,为同志之爱代言,致力于在全世界范围内发现同志真爱、传播并服务同志真爱，倡导不分性别、宗教、种族、国度、年龄、贫富的忠诚平等一生唯一的真爱理念，凡爱皆一样，没有界限，没有标签，没有贵贱。自诞生之日起，IDLOVES就始终如一地秉持着“平等、自由、真爱、唯一”的品牌核心价值观，以及“不另类、不区别、不标新立异”的产品观。长久以来受到业内机构、明星名人、时尚人士等的广泛赞誉及遍布全球数亿万计同志信徒的拥趸。IDLOVES不只是一个品牌，更是一种象征和旗帜，是自由与平等；IDLOVES不只是一枚戒指，更是一种情感和文化，是爱与荣耀，同志专属定情信物原创首饰，传播同志正能量，推动同志平权，促进人类文明进步，全世界的同志都以IDLOVES为纽带团结在同一个梦想同一个信念之下。
                </div>
            </div>
            <div id="intro_duce" class="intro_duce">
                <p class="m-0">谁选择了IDLOVES？<a href="javascript:;"></a></p>
                <p class="border_bottom1_1">
                    <strong class="border_bottom_angle"></strong>
                </p>
                <p class="border_bottom2_2"></p>
            </div>
            <br/>
            <div class="row m-0">
                <div class="col-6 p-0">
                    <img class="w-100" src="http://127.0.0.1:3000/shouye1_03_1.jpg" alt=""/>
                </div>
                <div class="col-6 font_style mt-4">
                    哪里有同性真爱，IDLOVES就应该出现在哪里，谁相信同性真爱，谁就应该选择IDLOVES； 严格来讲，全世界共有40亿ID真爱信徒，作为人类的精英人群，他们包括古希腊哲学家苏格拉底、达芬奇、莎士比亚、牛顿、王尔德、卢森堡首相贝特尔、冰岛女总理西于尔扎多蒂、苹果CEO库克、张国荣先生、蔡康永先生、黄耀明先生、《越狱》男主角沃斯米勒、奥斯卡金像奖最佳女主角布兰切特、Facebook联合创始人休斯、特拉斯联合创始人罗恩舒曼、《断背山》男主角吉伦哈尔、澳洲国会议员黄英贤、全球票房第一的电影阿凡达主演沃辛顿等，IDLOVES不只是一个品牌，更是一种象征和旗帜；IDLOVES不只是一个产品，更是一种情感和文化。全世界的同志都以IDLOVES为纽带团结在同一个梦想同一个信念之下。
                </div>
            </div>
            <!-- 戒指系列导航栏-->
            <div>
                <!-- 选项卡导航-->
                <div class="select_nav">
                    <ul class="row nav nav-tabs border-0 m-0">
                        <li class="p-0 text-center col-2 m-0 nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#tab1">REALLOVE</a>
                        </li>
                        <li class="p-0 text-center col-2 m-0 nav-item">
                            <a class="nav-link" data-toggle="tab" href="#tab2">PRIDE</a>
                        </li>
                        <li class="p-0 text-center col-2 m-0 nav-item">
                            <a class="nav-link" data-toggle="tab" href="#tab3">FOREVER</a>
                        </li>
                        <li class="p-0 text-center col-2 m-0 nav-item">
                            <a class="nav-link" data-toggle="tab" href="#tab4">ONLYYOU</a>
                        </li>
                        <li class="p-0 text-center col-2 m-0 nav-item">
                            <a class="nav-link" data-toggle="tab" href="#tab5">CUPID</a>
                        </li>
                        <li class="p-0 text-center col-2 m-0 nav-item">
                            <a class="nav-link" data-toggle="tab" href="#tab6">COSTELLATHION</a>
                        </li>
                    </ul>
                </div>
                <!-- 选项卡的内容-->
                <div class="tab-content">
                    <div id="tab1" class="tab-pane active">
                        <div class="row">
                            <div class="col-1"></div>
                            <div class="content_left col-5">
                                <img class="w-75" src="http://127.0.0.1:3000/1439892478192575012.jpg" alt=""/>
                            </div>
                            <div class="content_right col-6">
                                <img src="http://127.0.0.1:3000/reallove.jpg" alt=""/>
                                <p>REALLOVE</p>
                                <button class="ml-5 btn btn_white">&gt;了解品牌文化</button>
                                <button class="btn btn_white">&gt;购买求婚钻戒</button>
                            </div>
                        </div>
                    </div>
                    <div id="tab2" class="tab-pane">
                        <div class="row">
                            <div class="col-1"></div>
                            <div class="content_left col-5">
                                <img class="w-75" src="http://127.0.0.1:3000/1439892512992500860.jpg" alt=""/>
                            </div>
                            <div class="content_right col-6">
                                <img src="http://127.0.0.1:3000/pride.jpg" alt=""/>
                                <p>PRIDE</p>
                                <button class="ml-5 btn btn_white">&gt;了解品牌文化</button>
                                <button class="btn btn_white">&gt;购买求婚钻戒</button>
                            </div>
                        </div>
                    </div>
                    <div id="tab3" class="tab-pane">
                        <div class="row">
                            <div class="col-1"></div>
                            <div class="content_left col-5">
                                <img class="w-75" src="http://127.0.0.1:3000/1439892541412270960.jpg" alt=""/>
                            </div>
                            <div class="content_right col-6">
                                <img src="http://127.0.0.1:3000/forever.jpg" alt=""/>
                                <p>FOREVER</p>
                                <button class="ml-5 btn btn_white">&gt;了解品牌文化</button>
                                <button class="btn btn_white">&gt;购买求婚钻戒</button>
                            </div>
                        </div>
                    </div>
                    <div id="tab4" class="tab-pane">
                        <div class="row">
                            <div class="col-1"></div>
                            <div class="content_left col-5">
                                <img class="w-75" src="http://127.0.0.1:3000/1439892584185225988.jpg" alt=""/>
                            </div>
                            <div class="content_right col-6">
                                <img src="http://127.0.0.1:3000/onlyyou.jpg" alt=""/>
                                <p>ONLYYOU</p>
                                <button class="ml-5 btn btn_white">&gt;了解品牌文化</button>
                                <button class="btn btn_white">&gt;购买求婚钻戒</button>
                            </div>
                        </div>
                    </div>
                    <div id="tab5" class="tab-pane">
                        <div class="row">
                            <div class="col-1"></div>
                            <div class="content_left col-5">
                                <img class="w-75" src="http://127.0.0.1:3000/1439892623792683605.jpg" alt=""/>
                            </div>
                            <div class="content_right col-6">
                                <img src="http://127.0.0.1:3000/cupid.jpg" alt=""/>
                                <p>CUPID</p>
                                <button class="ml-5 btn btn_white">&gt;了解品牌文化</button>
                                <button class="btn btn_white">&gt;购买求婚钻戒</button>
                            </div>
                        </div>
                    </div>
                    <div id="tab6" class="tab-pane">
                        <div class="row">
                            <div class="col-1"></div>
                            <div class="content_left col-5">
                                <img class="w-75" src="http://127.0.0.1:3000/1439892672389118705.jpg" alt=""/>
                            </div>
                            <div class="content_right col-6">
                                <img src="http://127.0.0.1:3000/costellathion.jpg" alt=""/>
                                <p>COSTELLATHION</p>
                                <button class="ml-5 btn btn_white">&gt;了解品牌文化</button>
                                <button class="btn btn_white">&gt;购买求婚钻戒</button>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
            <!-- 主推商品栏 -->
            <div class="com_nav mb-4">
                <!-- 商品导航栏 -->
                <ul class="nav row nav-tabs border-0 m-0">
                    <li class="nav-item col-2 px-0 py-2 text-center">
                        <a class="nav-link active" data-toggle="tab" href="#tab1_1">人气最高</a>
                    </li>
                    <li class="nav-item col-2 px-0 py-2 text-center">
                        <a class="nav-link" data-toggle="tab" href="#tab1_2">热销商品</a>
                    </li>
                </ul>
                <!-- 商品选项卡内容 -->
                <div class="tab-content">
                    <div id="tab1_1" class="tab-pane active">
                        <div class="row m-0">
                            <div class="top_left col-6 p-0">
                                <div class="row m-0">
                                    <div class="col-6 pt-5 pl-3 pr-0">
                                        <h2>{{list[0].title}}</h2>
                                        <p class="label">{{list[0].details}}</p>
                                        <p class="price">￥{{list[0].price}}元</p>
                                        <p class="sales">销量({{list[0].sold_count}})</p>
                                    </div>
                                    <div class="col-6 px-0">
                                        <a href="javascript:;" @click="jumpdetails(0)"><img class="w-100 pt-3" src="http://127.0.0.1:3000/46_thumb_G_1440548965693.jpg" /></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3 top_center p-0">
                                <h5 class="title mt-4 px-4 text-dark">{{list[1].title}}</h5>
                                <p class="price1 pl-4">￥{{list[1].price}}元</p>
                                <p class="sales pl-4 mb-1">销量({{list[1].sold_count}})</p>
                                <a href="javascript:;" @click="jumpdetails(1)">
                                    <img class="w-75 pl-5" src="http://127.0.0.1:3000/42_thumb_G_1440495005716.jpg" />
                                </a>
                            </div>
                            <div class="col-3 top_right p-0">
                                <h5 class="title mt-4 px-4 text-dark">{{list[2].title}}</h5>
                                <p class="price1 pl-4">￥{{list[2].price}}元</p>
                                <p class="sales pl-4 mb-1">销量({{list[2].sold_count}})</p>
                                <a href="javascript:;" @click="jumpdetails(2)">
                                    <img class="w-75 pl-5" src="http://127.0.0.1:3000/68_P_1440934215196.jpg" />
                                </a>
                            </div>
                            <div class="col-3 p-0">
                                <div class="bottom_left row m-0">
                                    <div class="col-6 p-0">
                                        <h5 class="pl-3 mt-2 text-dark">{{list[3].title}}</h5>
                                        <p class="price1 mb-1 pl-3">￥{{list[3].price}}元</p>
                                        <p class="sales mb-1 pl-3">销量({{list[3].sold_count}})</p>
                                    </div>
                                    <div class="col-6 p-0">
                                        <a href="javascript:;" @click="jumpdetails(3)"><img class="w-100 py-2" src="http://127.0.0.1:3000/17_thumb_G_1438909162264.jpg" /></a>
                                    </div>
                                </div>
                                <div class="bottom_left row m-0">
                                    <div class="col-6 p-0">
                                        <h5 class="pl-3 mt-2 text-dark">{{list[4].title}}</h5>
                                        <p class="price1 mb-1 pl-3">￥{{list[4].price}}元</p>
                                        <p class="sales mb-1 pl-3">销量({{list[4].sold_count}})</p>
                                    </div>
                                    <div class="col-6 p-0">
                                         <a href="javascript:;" @click="jumpdetails(4)"><img class="w-100 py-1" src="http://127.0.0.1:3000/62_thumb_G_1440753030070.jpg" /></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3 bottom_center p-0">
                                <h5 class="title mt-4 px-4 text-dark">{{list[5].title}}</h5>
                                <p class="price1 pl-4">￥{{list[5].price}}元</p>
                                <p class="sales pl-4 mb-1">销量({{list[5].sold_count}})</p>
                                <a href="javascript:;" @click="jumpdetails(5)">
                                    <img class="w-75 pl-5" src="http://127.0.0.1:3000/61_thumb_G_1440750369325.jpg" />
                                </a>
                            </div>
                            <div class="col-6 p-0">
                                <div class="bottom_right row m-0">
                                    <div class="col-6 pt-5 pl-3 pr-0">
                                        <h2 class="">{{list[6].title}}</h2>
                                        <p class="label">{{list[6].details}}</p>
                                        <p class="price">￥{{list[6].price}}元</p>
                                        <p class="sales">销量({{list[6].sold_count}})</p>
                                    </div>
                                    <div class="col-6 px-0">
                                        <a href="javascript:;" @click="jumpdetails(6)"><img class="w-100 pt-3" src="http://127.0.0.1:3000/77_thumb_G_1440942371750.jpg" /></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab1_2" class="tab-pane">
                        <div class="row m-0">
                            <div class="top_left col-6 p-0">
                                <div class="row m-0">
                                    <div class="col-6 pt-5 pl-3 pr-0">
                                        <h2 class="">{{list[7].title}}</h2>
                                        <p class="label">{{list[7].details}}</p>
                                        <p class="price">￥{{list[7].price}}元</p>
                                        <p class="sales">销量({{list[7].sold_count}})</p>
                                    </div>
                                    <div class="col-6 px-0">
                                        <a href="javascript:;" @click="jumpdetails(7)"><img class="w-100 pt-3" src="http://127.0.0.1:3000/77_thumb_G_1440942371750.jpg" /></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3 top_center p-0">
                                <h5 class="title mt-4 px-4 text-dark">{{list[8].title}}</h5>
                                <p class="price1 pl-4">￥{{list[8].price}}元</p>
                                <p class="sales pl-4 mb-1">销量({{list[8].sold_count}})</p>
                                <a href="javascript:;" @click="jumpdetails(8)">
                                    <img class="w-75 pl-5" src="http://127.0.0.1:3000/78_thumb_G_1440942420420.jpg" />
                                </a>
                            </div>
                            <div class="col-3 top_right p-0">
                                <h5 class="title mt-4 px-4 text-dark">{{list[9].title}}</h5>
                                <p class="price1 pl-4">￥{{list[9].price}}元</p>
                                <p class="sales pl-4 mb-1">销量({{list[9].sold_count}})</p>
                                <a href="javascript:;" @click="jumpdetails(9)">
                                    <img class="w-75 pl-5" src="http://127.0.0.1:3000/76_thumb_G_1440942262886.jpg" />
                                </a>
                            </div>
                            <div class="col-3 p-0">
                                <div class="bottom_left row m-0">
                                    <div class="col-6 p-0">
                                        <h5 class="pl-3 mt-2 text-dark">{{list[10].title}}</h5>
                                        <p class="price1 mb-1 pl-3">￥{{list[10].price}}元</p>
                                        <p class="sales mb-1 pl-3">销量({{list[10].sold_count}})</p>
                                    </div>
                                    <div class="col-6 p-0">
                                        <a href="javascript:;" @click="jumpdetails(10)"><img class="w-100 py-2" src="http://127.0.0.1:3000/75_thumb_G_1440942166418.jpg" /></a>
                                    </div>
                                </div>
                                <div class="bottom_left row m-0">
                                    <div class="col-6 p-0">
                                        <h5 class="pl-3 mt-2 text-dark">{{list[11].title}}</h5>
                                        <p class="price1 mb-1 pl-3">￥{{list[11].price}}元</p>
                                        <p class="sales mb-1 pl-3">销量({{list[11].sold_count}})</p>
                                    </div>
                                    <div class="col-6 p-0">
                                         <a href="javascript:;" @click="jumpdetails(11)"><img class="w-100 py-1" src="http://127.0.0.1:3000/42_thumb_G_1440495005716.jpg" /></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3 bottom_center p-0">
                                <h5 class="title mt-4 px-4 text-dark">{{list[12].title}}</h5>
                                <p class="price1 pl-4">￥{{list[12].price}}元</p>
                                <p class="sales pl-4 mb-1">销量({{list[12].sold_count}})</p>
                                <a href="javascript:;" @click="jumpdetails(12)">
                                <img class="w-75 pl-5" src="http://127.0.0.1:3000/38_thumb_G_1439339267575.jpg" /></a> 
                            </div>
                            <div class="col-6 p-0">
                                <div class="bottom_right row m-0">
                                    <div class="col-6 pt-5 pl-3 pr-0">
                                        <h2 class="">{{list[13].title}}</h2>
                                        <p class="label">{{list[13].details}}</p>
                                        <p class="price">￥{{list[13].price}}元</p>
                                        <p class="sales">销量({{list[13].sold_count}})</p>
                                    </div>
                                    <div class="col-6 px-0">
                                        <a href="javascript:;" @click="jumpdetails(13)"><img class="w-100 pt-3" src="http://127.0.0.1:3000/64_thumb_G_1440757498556.jpg" /></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>   
            </div>
            <!-- 资讯中心 -->
            <div>
                <!-- 标题栏 -->
                <div class="massage">
                    <p class="m-0">资讯中心</p>
                    <p class="border_bottom1_1">
                        <strong class="border_bottom_angle"></strong>
                    </p>
                    <p class="border_bottom2_2"></p>
                </div>
                <br/>
                <!-- 具体内容栏 -->
                <div class="row m-0">
                    <div class="information col-3 pl-0 pr-1">
                        <ul class="p-0">
                            <li>
                                <a class="conseal" href="javascript:;"><img src="http://127.0.0.1:3000/shouye17_03.jpg" /></a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="2018年4月15日官方《人民日报》发表“不一样的烟火”，一样可以绽放|随笔">2018年4月15日官方《人民日...</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="IDLOVES专属LGBT戒指品牌超凡工艺照曝光">IDLOVES专属LGBT戒指品...</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="盘点那些世界各国同性恋政要">盘点那些世界各国同性恋政要</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="2016台湾第16届同志游行现场">2016台湾第16届同志游行现场</a>
                            </li>
                            <li>
                                <a href="javascript:;" title=""><img class="float-right mt-3" src="http://127.0.0.1:3000/shouye3_03.jpg" /></a>
                            </li>
                        </ul>
                        <!-- 主图下标题 -->
                        <div class="conceal_grey">IDLOVES动态</div>
                    </div>
                    <div class="information col-3 px-1">
                        <ul class="p-0">
                            <li>
                                <a class="conseal" href="javascript:;"><img src="http://127.0.0.1:3000/shouye18_05.jpg" /></a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="同志对戒专属定制">同志对戒专属定制</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="同性专属定制戒指品牌画面">同性专属定制戒指品牌画面</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="同性专属定制戒指IDLOVES的品牌密码">同性专属定制戒指IDLOVES的...</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="les情侣戒指专属定制">les情侣戒指专属定制</a>
                            </li>
                            <li>
                                <a href="javascript:;"><img class="float-right mt-3" src="http://127.0.0.1:3000/shouye3_03.jpg" /></a>
                            </li>
                        </ul>
                        <!-- 主图下标题 -->
                        <div class="conceal_grey">珠宝百科</div>    
                    </div>
                    <div class="information col-3 px-1">
                        <ul class="p-0">
                            <li>
                                <a class="conseal" href="javascript:;"><img src="http://127.0.0.1:3000/shouye19.jpg" /></a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="同志爱情的试金石">同志爱情的试金石</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="ID式爱情的求婚攻略">ID式爱情的求婚攻略</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="直击长春工程学院男男浪漫求婚现场">直击长春工程学院男男浪漫求婚现场</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="纽约同志游行时，男男求婚画面太赞了！他说yes！">纽约同志游行时，男男求婚画面太赞...</a>
                            </li>
                            <li>
                                <a href="javascript:;"><img class="float-right mt-3" src="http://127.0.0.1:3000/shouye3_03.jpg" /></a>
                            </li>
                        </ul>
                        <!-- 主图下标题 -->
                        <div class="conceal_grey">求婚指南</div>
                    </div>   
                    <div class="information col-3 pl-1 pr-0">
                        <ul class="p-0">
                            <li>
                                <a class="conseal" href="javascript:;"><img src="http://127.0.0.1:3000/shouye20_03.jpg" /></a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="怎么定制IDLOVES?">怎么定制IDLOVES?</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="同性恋首饰">同性恋首饰</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="IDLOVES同性钻石真假如何鉴定">IDLOVES同性钻石真假如何鉴...</a>
                            </li>
                            <li>
                                <i></i>
                                <a href="javascript:;" title="IDLOVES同性钻戒钻石颜色分几个等级">IDLOVES同性钻戒钻石颜色分...</a>
                            </li>
                            <li>
                                <a href="javascript:;"><img class="float-right mt-3" src="http://127.0.0.1:3000/shouye3_03.jpg" /></a>
                            </li>
                        </ul>
                        <!-- 主图下标题 -->
                        <div class="conceal_grey">钻石百科</div>
                    </div>
                 </div>
            </div>
            <!-- 媒体报道栏 -->
            <div>
                <!-- 媒体报道标题栏 -->
                <div class="massage">
                    <p class="m-0">资讯中心</p>
                    <p class="border_bottom1_1">
                        <strong class="border_bottom_angle"></strong>
                    </p>
                    <p class="border_bottom2_2"></p>
                </div>
                <br>
                <!-- 内容栏主图 -->
                <div class="row m-0 mb-5">
                    <div class="col-5 p-0">
                        <img class="media_img" src="http://127.0.0.1:3000/shouye21_03.jpg" />
                    </div>
                    <!-- 新闻排列栏 -->
                    <div class="media_content col-7 p-0 pl-3">
                        <div class="row m-0">
                            <div class="col-4 p-0">
                                <a href="javascript:;"  title="2018年4月15日官方《人民日报》发表“不一样的烟火”，一样可以绽放|随笔">
                                    <img class="w-100" src="http://127.0.0.1:3000/1524088970536582441.jpg" alt="2018年4月15日官方《人民日报》发表“不一样的烟火”，一样可以绽放|随笔">
                                </a>
                            </div>
                            <div class="col-8 p-0">
                                <a href="javascript:;" title="2018年4月15日官方《人民日报》发表“不一样的烟火”，一样可以绽放|随笔">
                                    <h5 class="mt-2 ml-3">2018年4月15日官方《人民日...</h5>
                                </a>
                                <a href="javascript:;" class=" ml-5 mt-3" title="2018年4月15日官方《人民日报》发表“不一样的烟火”，一样可以绽放|随笔">“不一样的烟火”，一样可以绽放|随笔</a>
                            </div>
                        </div>
                        <div class="row m-0">
                            <div class="col-4 p-0">
                                <a href="javascript:;"  title="盘点那些世界各国同性恋政要">
                                    <img class="w-100" src="http://127.0.0.1:3000/1549808181675654691...jpg" alt="盘点那些世界各国同性恋政要">
                                </a>
                            </div>
                            <div class="col-8 p-0">
                                <a href="javascript:;" title="盘点那些世界各国同性恋政要">
                                    <h5 class="mt-2 ml-3">盘点那些世界各国同性恋政要</h5>
                                </a>
                                <a href="javascript:;" class=" ml-5 mt-3" title="盘点那些世界各国同性恋政要">盘点那些世界各国同性恋政要</a>
                            </div>
                        </div>
                        <div class="row m-0">
                            <div class="col-4 p-0">
                                <a href="javascript:;"  title="2016台湾第16届同志游行现场">
                                    <img class="w-100" src="http://127.0.0.1:3000/1549836344709661768.jpg" alt="2016台湾第16届同志游行现场">
                                </a>
                            </div>
                            <div class="col-8 p-0">
                                <a href="javascript:;" title="2016台湾第16届同志游行现场">
                                    <h5 class="mt-2 ml-3">2016台湾第16届同志游行现场</h5>
                                </a>
                                <a href="javascript:;" class=" ml-5 mt-3" title="2016台湾第16届同志游行现场">2016台湾第16届同志游行现场</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>
<script>
export default {
    data(){
        return {
            userName:"",
            idNumber:"",
            list:[{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
        }
    },
    methods:{
        lovereg(){
            var user=this.userName;
            var id=this.idNumber;
            var url="loveReg";
            var obj={user_name:user,id_number:id};
            this.axios.get(url,{params:obj}).then
            (res=>{
                //7.获取服务器返回结果
                //7.1 未查找到订单  提示
                    //vue中一个组件执行跳转，用this.$router.push("路径");
                if(res.data.code==-1){
                    alert("验证成功,您可以购买所需商品");
                }else{
                    //7.2 查找到已购买订单
                    alert("抱歉！您已有购买记录，不能再次购买");
                }
            })
        },
        jumpdetails(i){
            var rid=this.list[i].href
            this.$router.push(rid);
        }
    },
    created() {
        this.axios.get("product").then(res=>{
            this.list=res.data.data;
        })
    }
    
}
</script>
<style scoped>
/* 给轮播图全屏宽度 */
.carousel{
    width:100%;height:100%;
    position: relative;
}
/* 定位指示器的位置 */
.carousel-indicators{
    position: absolute;
    top:102%;
}
/* 设定指示器的大小，间隔位置，微调 */
.carousel-indicators li{
    width:10px;height:10px;
    background-color: #7c7c7c;
    border-radius: 50%;
    margin-right:10px;
}
/* 指示器当前显示页面的背景色调整 */
.carousel-indicators .active{
    background-color:#000 ;
}
/*主页真爱验证*/
.index_verify{
    width:1110px;
    background:url(http://127.0.0.1:3000/shouy3_03.png) no-repeat;
}
/*真爱验证内容样式*/
.btn-white{
    background: #fff;
    color: #666;
}
.index_verify input{
    height:38px;width:180px;
    border:0;
    border-radius: 3px;
    padding:0;
    padding-left: 3px;
    position:relative;
    top:2px;
    color:#333;
}
/* 主体内容详细介绍文案部分 */
.intro_duce{
    height:40px;
}
.intro_duce p{
    line-height: 40px;
    font-size:30px;
}
.intro_duce p a{
    width:24px;height:40px;
    display: block;
    float:right;
    background: url(http://127.0.0.1:3000/shouye3_03.jpg) no-repeat left center;
}
.border_bottom1{
    width:200px;height:7px;
    border-bottom:2px solid #22abcc;
    overflow: hidden;
    position: relative;
    float:left;
}
.border_bottom_angle{
    display: block;
    width:0;height:0;
    border-style:dashed dashed solid dashed;
    border-width: 9px;
    border-color: transparent transparent #22abcc transparent;
    overflow: hidden;
    zoom: 1;
    font-size: 0;
    position: absolute;
    left: 35px;
    bottom: -3px;
}
.border_bottom2{
    width: 910px;
    height: 7px;
    border-bottom: 2px solid #e0e0e0;
    float: left;
}
#intro_duce .border_bottom1_1{
    width:255px;height:7px;
    border-bottom:2px solid #22abcc;
    overflow: hidden;
    position: relative;
    float:left;
}
#intro_duce .border_bottom2_2{
    width: 855px;
    height: 7px;
    border-bottom: 2px solid #e0e0e0;
    float: left;
}
.font_style{
    font-size:16px;
    color:#666;
    line-height: 30px;
}
/*选项卡导航*/
.content_right{
    margin-top:100px;
    padding-left:100px;
}
.content_right p{
    color: #666;
    margin-left:30%;
}
.btn_white{
    color: #22abcc;
    background-color: #fff;
    border:1px solid #22abcc;
    border-radius:0;
}
.select_nav{
    background:#dedede;
    border:0;
}
.select_nav ul li a{
    background: #dedede;
    color:#666;
    border:0;
}
.select_nav .nav-tabs .nav-link{
    border-radius:2px;
    border-bottom: 0;
}
.select_nav .nav-tabs .nav-item {
    margin-bottom: 0;
}

.select_nav .nav-tabs .nav-link.active{
    background: #22abcc;
    color:#fff;
    border:0;
}
/* 热销商品栏 */
/* 热销商品导航栏 */
.com_nav .nav-tabs .nav-item .nav-link{
    border:0;
    background: transparent;
    color:#666;
}
.com_nav .nav-tabs .nav-item .nav-link.active{
    color:#22abcc;
}
/* 热销商品详情栏 */
.top_left{
    border:1px solid #e0e0e0;
}
.row .top_left div .label,.bottom_right .label{
    color:#999;
    font-size: 15px;
}
.row .top_left div .price,.bottom_right .price{
    color:#22abcc;
    font:18px bolder;
}
.row .top_left div .sales,.row .top_center .sales,
.row .top_right .sales,.row .bottom_center .sales,
.bottom_left .sales,.bottom_right .sales{
    color:#ffae00;
    font-size:14px;
}
.row .top_center,.row .top_right{
    border-top:1px solid #e0e0e0;
    border-right:1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.row .top_center .price1,.row .top_right .price1,
.row .bottom_center .price1,.bottom_left .price1{
    color:#22abcc;
    font:16px bolder;
    margin-bottom: 5px;
}
.bottom_left{
    border-right:1px solid #e0e0e0;
    border-bottom:1px solid #e0e0e0;
    border-left:1px solid #e0e0e0;
    padding-bottom:1px;
}
.bottom_center,.bottom_right{
    border-right:1px solid #e0e0e0;
    border-bottom:1px solid #e0e0e0;
    padding-bottom:10px;
}
/* 资讯中心 */
.massage p{
    font-size:30px;
}
.massage .border_bottom1_1{
    width:130px;height:7px;
    border-bottom:2px solid #22abcc;
    overflow: hidden;
    position: relative;
    float:left;
}
.massage .border_bottom2_2{
    width: 980px;
    height: 7px;
    border-bottom: 2px solid #e0e0e0;
    float: left;
}
.information ul li .conceal{
    position: relative;
}
.information ul li{
    list-style: none;
    line-height: 30px;
    float:left;
    width: 100%;
}
.information ul li i{
    width:12px;height:30px;
    background: url(http://127.0.0.1:3000/li-bg_03.png) no-repeat left center;
    display: inline-block;
    float:left;
}
.information ul li a{
    font-size:14px;
    color:#666;
    display: block;
    /* float:right; */
}
.conceal_grey{
    width:258px;height:37px;
    background: url(http://127.0.0.1:3000/index-bg_03.png);
    color:#fff;
    font-size:16px;
    line-height:37px;
    padding-left: 13px;
    position: absolute;
    top:164px;
}
/* 媒体报道 */
/* 主图 */
.media_img{
    width:420px;
    padding-top:15px;
}
/* 内容 */
.media_content .row{
    border-bottom:1px dashed #666;
    padding:15px 0px;
}
.media_content div .col-4 a img{
    border:1px solid #999;
}
.media_content div .col-8 a:hover{
    text-decoration: none;
    color:#22abcc;
}
.media_content div .col-8 a{
    color:#000;
}
.media_content div .col-8 .ml-5{
    font-size:14px;
    color:#666;
} 
</style>







